<template>
  <div class="system-role-container app-container">
    <el-card>
      <div class="system-user-search mb15">
        <el-input v-model="state.listQuery.name" placeholder="请输入申请名称" style="max-width: 180px"></el-input>
        <el-button type="primary" class="ml10" @click="search">查询
        </el-button>
        <el-button type="success" class="ml10" @click="onOpenSaveOrUpdate('save', null)">新增
        </el-button>
      </div>
      <z-table
          :columns="state.columns"
          :data="state.listData"
          ref="tableRef"
          v-model:page-size="state.listQuery.pageSize"
          v-model:page="state.listQuery.page"
          :total="state.total"
          @pagination-change="getList"
      />
    </el-card>
  </div>
</template>

<script setup name="userApply">
import {h, onMounted, reactive, ref} from 'vue';
import {ElButton, ElMessage, ElMessageBox, ElTag} from 'element-plus';
import {myApplyApi} from "/@/api/point_management/my_application";
import {useRouter} from 'vue-router'


const tableRef = ref();
const router = useRouter();
const state = reactive({
  columns: [
    {
      key: 'name', label: '申请名称', width: '', align: 'center', show: true,
      render: ({row}) => h(ElButton, {
        link: true,
        type: "primary",
        onClick: () => {
          onOpenSaveOrUpdate("detail", row)
        }
      }, () => row.name)
    },
    {key: 'type', label: '申请类型', width: '', align: 'center', show: true},
    {
      key: 'status', label: '单据状态', width: '', align: 'center', show: true,
      render: ({row}) => h(ElTag, {
        type: row.status === 10 ? "success" : "info",
      }, () => row.status === 10 ? "审核中" : "草稿",)
    },
    {key: 'auditor', label: '审核人', width: '', align: 'center', show: true},
    {key: 'remark', label: '备注', width: '', align: 'center', show: true},
    {key: 'updated_by_name', label: '更新人', width: '', align: 'center', show: true},
    {key: 'creation_date', label: '创建时间', width: '150', align: 'center', show: true},
    {
      label: '操作', fixed: 'right', width: '140', align: 'center',
      render: ({row}) => {
        if (row.status === 50) {
          return h("div", null, [
            h(ElButton, {
              type: "primary",
              onClick: () => {
                onOpenSaveOrUpdate("update", row)
              }
            }, () => '编辑'),

            h(ElButton, {
              type: "danger",
              onClick: () => {
                deleted(row)
              }
            }, () => '删除')
          ])
        }
      }
    },
  ],
  // list
  listData: [],
  tableLoading: false,
  total: 0,
  listQuery: {
    page: 1,
    pageSize: 20,
    name: '',
  },
});
// 初始化表格数据
const getList = () => {
  console.log('我进入页面了')
  tableRef.value.openLoading()
  myApplyApi().userApplyList(state.listQuery)
      .then(res => {
        state.listData = res.data.rows
        state.total = res.data.rowTotal
      })
      .finally(() => {
        tableRef.value.closeLoading()
      })
};

// 查询
const search = () => {
  state.listQuery.page = 1
  getList()
}

const onOpenSaveOrUpdate = (editType, row) => {
  let query = {}
  query.editType = editType
  console.log('query：', query, 'row:', row)
  if (query.editType === 'save') {
    query.timestamp = new Date().getTime()
    router.push({name: 'EditUserApply', query: query})
  } else if (query.editType === 'detail') {
    query.id = row.id
    router.push({name: 'UserApplyDetail', query: query})
  } else if (row && query.editType === 'update')
    router.push({name: 'EditUserApply', query: query})
};

// 删除角色
const deleted = (row) => {
  ElMessageBox.confirm('是否删除该条数据, 是否继续?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
      .then(() => {
        myApplyApi().userApplyDeleted({id: row.id})
            .then(() => {
              ElMessage.success('删除成功');
              getList()
            })
      })
      .catch(() => {
      });
};

// 页面加载时
onMounted(() => {
  getList();
});

</script>
